<template>
  <el-card>
    <el-steps style="max-width: 100%" :active="currentStepIndex">
      <el-step title="基本信息" icon="CreditCard" @click="activeStep(1)" />
      <el-step title="表单设计" icon="Document" @click="activeStep(2)" />
      <el-step title="流程设计" @click="activeStep(3)">
        <template #icon>
          <el-icon :size="25">
            <Icon icon="octicon:workflow-24"></Icon>
          </el-icon>
        </template>
      </el-step>
    </el-steps>
  </el-card>
  <el-card class="content">
    <div>
      <div v-show="currentStepIndex === 1">
        <WorkflowNomal ref="workflowNomalRef" v-model="entity" />
      </div>
      <div v-show="currentStepIndex === 2">
        <WorkflowFormDesing v-model="entity.inputs" />
      </div>
      <!--这个地方一定要用v-if强制重新渲染组件不然会出问题-->
      <div v-if="currentStepIndex === 3">
        <Workflowdesign v-model="entity.nodes" :inputs="entity.inputs" />
      </div>
    </div>
  </el-card>
  <el-card>
    <div class="tools">
      <!-- <el-button type="primary" size="large" icon="ArrowLeft" @click="test">Test</el-button> -->
      <el-button type="primary" size="large" v-show="currentStepIndex !== 1" icon="ArrowLeft"
        @click="preStep">上一步</el-button>
      <el-button type="primary" size="large" v-show="currentStepIndex !== 3" icon="ArrowRight"
        @click="nextStep">下一步</el-button>
      <el-button type="success" size="large" v-show="currentStepIndex === 3" icon="Select"
        @click="completed">提&nbsp;&nbsp;交</el-button>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import WorkflowNomal from './workflow-nomal.vue';
import WorkflowFormDesing from './workflow-form-design.vue';
import Workflowdesign from './workflow-design.vue';
import type { WorkflowDefinition } from '@/utils/api/workflow/definition/type';
import { useRouter } from 'vue-router';
// 导入pinia仓库
import pinia from '@/stores';
// 导入工作流小仓储
import useWorkflowStore from '@/stores/modules/workflow';
import { ElMessage } from 'element-plus';

// 获取工作流小仓储实例
const workflowStore = useWorkflowStore(pinia);

// 获取路由实例
const { push } = useRouter();

// 当前步骤索引
const currentStepIndex = ref(1);
// 当前步骤是否验证通过
const currentStepValidated = ref(false);
// 定义流程对象
const entity = ref<WorkflowDefinition>({
  id: '',
  title: '',
  version: 1,
  description: '',
  icon: '',
  color: 'rgba(255, 69, 0, 0.68)',
  group: '',
  inputs: [],
  nodes: []
});
// 步骤验验证设置
const setValidated = (validated: boolean) => {
  currentStepValidated.value = validated;
};

// const test = () => {
//   console.log(entity.value);
// };

// 基础组件实例
const workflowNomalRef = ref();

// 下一步
const nextStep = async () => {
  // 第一步验证
  if (currentStepIndex.value === 1 && workflowNomalRef.value) {
    if (await workflowNomalRef.value.validated()) {
      setValidated(true);
    } else {
      setValidated(false);
    }
  }
  // 跳转到下一个步骤
  if (currentStepIndex.value++ > 2) {
    currentStepIndex.value = 1;
  }
};

// 上一步
const preStep = () => {
  if (currentStepIndex.value-- <= 1) {
    currentStepIndex.value = 1;
  }
};

// 选择步骤
const activeStep = (active: number) => {
  currentStepIndex.value = active;
};

// 提交
const completed = async () => {
  if (currentStepValidated.value) {
    console.log(entity.value);
    await workflowStore.create(entity.value);
    ElMessage.success('添加成功');
    // 路由跳转
    push('/workflow/list');
  }
};
</script>
<style scoped lang="scss">
.content {
  min-height: $work_flow_min_height;
}

.tools {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
</style>
